<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <router-link to="/home">首页</router-link>
      <router-link to="/fenlei">分类</router-link>
      <router-link to="/cart">购物车</router-link>
      <!-- 视口  -->
      <router-view></router-view>
    </div>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <script>
      // 嵌套路由
      // 1 准备组件
      const Home = {
        name: 'home',
        template: `
        <div>{{msg}}---{{myid}}---{{kid}}
            <button @click="turnHomeReplace">跳转购物车</button>
        </div>`,
        data() {
          return {
            msg: '我是home组件',
            myid: '',
            kid: ''
          }
        },
        created() {
          this.myid = this.$route.params.myid
          this.kid = this.$route.query.kid
        },
        methods: {
          turnHomeReplace() {
            // this.$router.replace('/home')
            this.$router.replace({ name: 'cart' })
          }
        }
      }
      // 分类组件
      const Fenlei = {
        name: 'Fenlei',
        template: `<div>
                    <h2>{{msg}}</h2>
                    <div>
                      <router-link to="/fenlei/yifu/999">衣服</router-link>
                      <router-link to="/fenlei/kuzi">裤子</router-link>
                      <router-view></router-view>
                    </div>
                  </div>`,
        data() {
          return {
            msg: '我是分类组件'
          }
        },
        mounted() {},
        methods: {}
      }
      // 购物车组件
      const Cart = {
        name: 'cart',
        template: `<div>
             {{msg}}
              <button @click="turnHome">跳转首页</button>
              <button @click="$router.go(-1)">回到上一页</button>  
              <button @click="qianjin">前进一页</button>  
            </div>`,
        data() {
          return {
            msg: '我是购物车组件'
          }
        },
        methods: {
          turnHome() {
            // 编程式路由
            // 原理 基于html5  history.pushState() 底层
            // this.$router.push('/home')
            // name跳转并传参
            // this.$router.push({ name: 'home', params: { myid: 888 } })
            // path跳转并传参
            var kid = 5566
            this.$router.push({ path: '/home', query: { kid } })
          },
          qianjin() {
            //  1 前进一页   -1后退一页    this.$router.go(n) n前进后退的步数
            // this.$router.go(1)
          }
        }
      }
      const Yifu = {
        name: 'yifu',
        template: `<div>{{msg}}--{{yid}}</div>`,
        data() {
          return {
            msg: '衣服组件衣服组件',
            yid: ''
          }
        },
        created() {
          this.yid = this.$route.params.yid
        },
        methods: {}
      }
      const Kuzi = {
        name: 'kuzi',
        template: `<div>{{msg}}</div>`,
        data() {
          return {
            msg: '裤子组件裤子组件'
          }
        },
        methods: {}
      }
      // 2 路由配置项
      const routes = [
        { path: '/home', name: 'home', component: Home, alias: 'home' },
        {
          path: '/fenlei',
          name: 'fenlei',
          component: Fenlei,
          alias: 'home',
          children: [
            //嵌套路由
            { path: 'yifu/:yid', name: 'yifu', component: Yifu },
            { path: 'kuzi', name: 'kuzi', component: Kuzi }
          ]
        },
        { path: '/cart', name: 'cart', component: Cart, alias: 'home' }
      ]
      //3 创建路由对象
      const router = new VueRouter({
        routes: routes
      })
      // 4 挂在vue实例
      var vm = new Vue({
        data() {
          return {}
        },
        router
      }).$mount('#app')
    </script>
  </body>
</html>
